<template>
  <div>
    <!-- 搜索 -->
    <div class="search-form">
      <el-form :inline="true" :model="params" size="small">
        <el-form-item label="请求路径" label-width="80px">
          <el-input
            v-model="params.logUrl"
            placeholder="请求地址"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="70px">
          <el-select
            v-model="params.logStatus"
            placeholder="请求状态"
            clearable
          >
            <el-option label="正常" :value="1"></el-option>
            <el-option label="异常" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" label-width="80px">
          <el-input
            v-model="params.createdBy"
            placeholder="创建人"
            clearable
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="创建时间" label-width="80px">
          <el-date-picker
            v-model="datetimeRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索结束 -->
    <!-- 数据表格 -->
    <div class="data-table">
      <el-table
        :data="logList"
        style="width: 100%"
        height="520"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="logUa" label="浏览器ua标识" width="300px">
        </el-table-column>
        <el-table-column prop="logController" label="控制层" width="350px">
        </el-table-column>
        <el-table-column prop="logUrl" label="请求地址" width="150px">
        </el-table-column>
        <el-table-column prop="logMethod" label="请求方式"> </el-table-column>
        <el-table-column prop="logIp" label="请求IP" width="200px"> </el-table-column>
        <el-table-column prop="logStatus" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.logStatus === 1" type="success">正常</el-tag>
            <el-tag v-else type="danger">异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="logTime" label="响应时间(毫秒)" width="133px">
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间" width="200px" sortable>
        </el-table-column>
        <el-table-column prop="createdBy" label="创建人"> </el-table-column>
        <el-table-column label="操作" width="100px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toInfo(scope.row.logId)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="deleteById(scope.row.logId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 数据表格结束 -->

    <!-- 分页组件 -->
    <div class="pageable-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <!-- 分页组件结束 -->

    <!-- 日志详情弹窗 -->
    <el-dialog title="日志详情" :visible.sync="logDialog" width="50%">
      <loginfo
        :active-id="activeId"
        @after="getByPage"
        @closeDialog="closeDialog"
      />
    </el-dialog>
    <!-- 日志详情弹窗结束 -->
  </div>
</template>

<script>
import { getByPage, deleteById } from "@/api/log";
import loginfo from "./loginfo";

export default {
  components: {
    loginfo,
  },
  data() {
    return {
      // 数据分页对象
      logList: [],
      // 总条数
      count: 0,
      // 查询分页对象
      params: {
        page: 1,
        limit: 20,
      },
      // 时间选择器变量 拿到的是个数组
      datetimeRange: null,
      // 控制弹窗显示
      logDialog: false,
      // 当前点击的ID
      activeId: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getByPage();
  },
  watch: {
    datetimeRange: {
      immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal && newVal.length === 2) {
          this.params.startDate = newVal[0];
          this.params.endDate = newVal[1];
        } else {
          this.params.startDate = null;
          this.params.endDate = null;
        }
      },
    },
  },
  methods: {
    // 查询所有
    getByPage() {
      getByPage(this.params).then((res) => {
        this.logList = res.data;
        this.count = parseInt(res.count);
      });
    },
    // 搜索
    search() {
      this.getByPage();
    },
    // 当前页条数发生改变时触碰
    handleSizeChange(val) {
      this.params.limit = val;
      this.getByPage();
    },
    // 当前页发生改变时触碰
    handleCurrentChange(val) {
      this.params.page = val;
      this.getByPage();
    },
    // 根据id删除
    deleteById(id) {
      this.$confirm("此操作将永久删除该日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.logDialog = false;
    },
    // 打开弹窗
    toInfo(id) {
      // 注意：顺序不能返
      this.activeId = id;
      this.logDialog = true;
    },
  },
};
</script>

<style>
</style>